<template>
  <f7-page class="register-page">
    <f7-navbar title="注册" back-link="返回"></f7-navbar>
    <div class="logo-box">
      <img src="../assets/logo.png" alt="">
    </div>
    <div class="container-box">
      <custom-input2 label="手机号" placeholder="请输入手机号" v-model="formItems.phone"></custom-input2>
      <custom-input2
        label="验证码"
        placeholder="请输入验证码"
        v-model="formItems.phone_code"
        sms-code
        :count="12"
        :sms-status.sync="smsStatus"
        @send="smsStatus = true"
      ></custom-input2>
      <custom-input2 type="password" label="登录密码" placeholder="请输入登录密码" v-model="formItems.pwd"></custom-input2>
      <custom-input2 type="password" label="重复密码" placeholder="请再次输入登录密码" v-model="formItems.pwd2"></custom-input2>
      <custom-input2 type="password" label="交易密码" placeholder="请输入交易密码" v-model="formItems.twopwd"></custom-input2>
      <custom-input2 type="password" label="确认交易密码" placeholder="请再次输入交易密码" v-model="formItems.twopwd2"></custom-input2>
      <custom-input2 label="邀请码" placeholder="请输入邀请码" v-model="formItems.invit_code"></custom-input2>
      <f7-button fill class="no-margin" @click="handleRegister">注册</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { register } from "../api/login";

  export default {
    name: "register",
    data() {
      return {
        smsStatus: false,
        formItems: {
          phone: '',
          pwd: '',
          pwd2: '',
          twopwd: '',
          twopwd2: '',
          invit_code: '',
          phone_code: ''
        }
      }
    },
    methods: {
      handleRegister() {
        register(this.formItems).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .register-page {
    background: url("../assets/home-bg.png") no-repeat center top;
    background-size: 100% 100%;
  }
  .logo-box {
    margin: 100px auto 0;
  }
  .container-box {
    .custom-input2 {
      margin-bottom: 30px;
    }
  }
</style>